<template>
    <!-- 内容组件 -->
    <div class="head">
        <div class="content">
            <!-- 搜索框 -->
            <img src="./天猫.png" style="position: relative;">
            <input type="text" placeholder="天猫 |请输入搜索内容" class="inp">
            <ul class="ul">
                <li>新款小书包</li>
                <li>全棉睡衣</li>
                <li>新款无线蓝牙耳机</li>
                <li>万代官方旗舰店</li>
                <li>租房小空调</li>
                <li>豪华手办</li>
            </ul>
            <!-- 分类 -->
            <div class="classify">
                <div class="classify-left">
                    <ul style="list-style: none;">
                        <li>分类</li>
                        <li>电脑 / 办公 / 文具</li>
                        <li>家电 / 数码 / 手机</li>
                        <li>家具 / 家居 / 家装</li>
                        <li>女装 / 男装 / 内衣</li>
                        <li>女鞋 / 男鞋 / 运动鞋</li>
                        <li>腕表 / 眼镜 / 珠宝</li>
                        <li>汽车 / 运动 / 户外</li>
                        <li>食品 / 酒水 / 生鲜</li>
                        <li>母婴 / 玩具 / 童车</li>
                        <li>娱乐 / 彩票 / 体育</li>
                    </ul>
                </div>
                <img src="../../center.png" alt="">
                <img src="../assets/天猫登录.png" alt="">
                <img src="../router/天猫商品.png" style="width: 1100px;">
            </div>
        </div>
    </div>
</template>

<script></script>

<style>
.content {
    margin: auto;
    width: 80%;
    text-align: center;
}

.ul {
    display: inline-block;
    color: #9499a6;
    font-size: 10px;
    margin-left: 40px;
}

.ul li {
    margin-right: 10px;
}

.inp {
    position: absolute;
    top: 100px;
    left: 770px;
    border: 2px solid #ff0036;
    width: 400px;
    height: 30px;
    margin-left: 10px;
    padding: 10px;
    border-radius: 20px;
}

.classify {
    margin-top: 10px;
}

.classify-left {
    display: inline-block;
    width: 200px;
    line-height: 30px;
    background: #ff0036;
    color: white;
    border-radius: 10px;
    margin-right: 20px;
    margin-top: -20px;
}

.classify-left ul li {
    color: white;
}
</style>